<template>
  <view 
    class="exercise-card" 
    :class="{ 'exercise-card--selected': selected }"
    @click="handleClick"
  >
    <!-- 动作图片 -->
    <view class="exercise-card__image">
      <image 
        v-if="exercise.image" 
        :src="exercise.image" 
        class="exercise-card__img"
        mode="aspectFill"
      />
      <view v-else class="exercise-card__img-placeholder">
        <u-icon name="camera" size="48rpx" color="#ccc"></u-icon>
      </view>
      
      <!-- 难度标签 -->
      <view 
        class="exercise-card__difficulty" 
        :class="`exercise-card__difficulty--${exercise.difficulty}`"
      >
        {{ getDifficultyText(exercise.difficulty) }}
      </view>
      
      <!-- 选中状态 -->
      <view v-if="selectable" class="exercise-card__checkbox">
        <u-icon 
          :name="selected ? 'checkbox-mark' : 'checkbox'" 
          :color="selected ? '#007AFF' : '#ccc'"
          size="40rpx"
        ></u-icon>
      </view>
    </view>
    
    <!-- 动作信息 -->
    <view class="exercise-card__content">
      <view class="exercise-card__header">
        <view class="exercise-card__name">{{ exercise.name }}</view>
        <view v-if="exercise.duration" class="exercise-card__duration">
          {{ exercise.duration }}{{ $t('exercise.minutes') }}
        </view>
      </view>
      
      <!-- 目标肌群 -->
      <view v-if="exercise.targetMuscles && exercise.targetMuscles.length" class="exercise-card__muscles">
        <view 
          v-for="muscle in exercise.targetMuscles.slice(0, 3)" 
          :key="muscle"
          class="exercise-card__muscle-tag"
        >
          {{ muscle }}
        </view>
        <view v-if="exercise.targetMuscles.length > 3" class="exercise-card__muscle-more">
          +{{ exercise.targetMuscles.length - 3 }}
        </view>
      </view>
      
      <!-- 器械要求 -->
      <view v-if="exercise.equipment" class="exercise-card__equipment">
        <u-icon name="tool" size="24rpx" color="#666"></u-icon>
        <text class="exercise-card__equipment-text">{{ exercise.equipment }}</text>
      </view>
      
      <!-- 动作描述 -->
      <view v-if="exercise.description" class="exercise-card__description">
        {{ exercise.description }}
      </view>
      
      <!-- 统计信息 -->
      <view class="exercise-card__stats">
        <view class="exercise-card__stat">
          <u-icon name="fire" size="24rpx" color="#FF6B35"></u-icon>
          <text class="exercise-card__stat-text">{{ exercise.calories || 0 }}{{ $t('exercise.calories') }}</text>
        </view>
        <view class="exercise-card__stat">
          <u-icon name="heart" size="24rpx" color="#FF3B30"></u-icon>
          <text class="exercise-card__stat-text">{{ exercise.usageCount || 0 }}{{ $t('exercise.usageCount') }}</text>
        </view>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view v-if="showActions" class="exercise-card__actions">
      <view 
        class="exercise-card__action-btn exercise-card__action-btn--edit"
        @click.stop="handleEdit"
      >
        <u-icon name="edit-pen" size="28rpx" color="#007AFF"></u-icon>
      </view>
      <view 
        class="exercise-card__action-btn exercise-card__action-btn--delete"
        @click.stop="handleDelete"
      >
        <u-icon name="trash" size="28rpx" color="#FF3B30"></u-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Exercise } from '@/types'

interface Props {
  exercise: Exercise
  selected?: boolean
  selectable?: boolean
  showActions?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  selected: false,
  selectable: false,
  showActions: false
})

interface Emits {
  click: [exercise: Exercise]
  edit: [exercise: Exercise]
  delete: [exercise: Exercise]
  select: [exercise: Exercise, selected: boolean]
}

const emit = defineEmits<Emits>()

// 获取难度文本
const getDifficultyText = (difficulty: string): string => {
  const difficultyMap: Record<string, string> = {
    'beginner': '初级',
    'intermediate': '中级',
    'advanced': '高级'
  }
  return difficultyMap[difficulty] || difficulty
}

// 事件处理
const handleClick = () => {
  if (props.selectable) {
    emit('select', props.exercise, !props.selected)
  } else {
    emit('click', props.exercise)
  }
}

const handleEdit = () => {
  emit('edit', props.exercise)
}

const handleDelete = () => {
  emit('delete', props.exercise)
}
</script>

<style lang="scss" scoped>
.exercise-card {
  background: var(--card-bg-color, #ffffff);
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  
  &:active {
    transform: scale(0.98);
  }
  
  &--selected {
    border: 4rpx solid var(--primary-color, #007AFF);
    box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
  }
}

.exercise-card__image {
  position: relative;
  width: 100%;
  height: 240rpx;
  overflow: hidden;
}

.exercise-card__img {
  width: 100%;
  height: 100%;
}

.exercise-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-color-light, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exercise-card__difficulty {
  position: absolute;
  top: 16rpx;
  left: 16rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 600;
  color: #ffffff;
  
  &--beginner {
    background: var(--success-color, #34C759);
  }
  
  &--intermediate {
    background: var(--warning-color, #FF9500);
  }
  
  &--advanced {
    background: var(--error-color, #FF3B30);
  }
}

.exercise-card__checkbox {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
}

.exercise-card__content {
  padding: 24rpx;
}

.exercise-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.exercise-card__name {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-color, #333333);
  flex: 1;
  margin-right: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-card__duration {
  font-size: 24rpx;
  color: var(--primary-color, #007AFF);
  background: var(--primary-color-light, #e3f2fd);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

.exercise-card__muscles {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.exercise-card__muscle-tag {
  padding: 6rpx 12rpx;
  background: var(--bg-color-light, #f8f9fa);
  color: var(--text-color-secondary, #666666);
  font-size: 22rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.exercise-card__muscle-more {
  padding: 6rpx 12rpx;
  background: var(--text-color-tertiary, #999999);
  color: #ffffff;
  font-size: 22rpx;
  border-radius: 16rpx;
  font-weight: 500;
}

.exercise-card__equipment {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.exercise-card__equipment-text {
  font-size: 24rpx;
  color: var(--text-color-secondary, #666666);
}

.exercise-card__description {
  font-size: 26rpx;
  color: var(--text-color-secondary, #666666);
  line-height: 1.5;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.exercise-card__stats {
  display: flex;
  gap: 24rpx;
}

.exercise-card__stat {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.exercise-card__stat-text {
  font-size: 24rpx;
  color: var(--text-color-tertiary, #999999);
}

.exercise-card__actions {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  display: flex;
  gap: 8rpx;
}

.exercise-card__action-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.9);
  }
  
  &--edit {
    &:active {
      background: rgba(0, 122, 255, 0.1);
    }
  }
  
  &--delete {
    &:active {
      background: rgba(255, 59, 48, 0.1);
    }
  }
}

// 暗色主题适配
[data-theme='dark'] {
  .exercise-card {
    --card-bg-color: #1c1c1e;
    --text-color: #ffffff;
    --text-color-secondary: #8e8e93;
    --text-color-tertiary: #636366;
    --bg-color-light: #2c2c2e;
    --primary-color-light: rgba(10, 132, 255, 0.2);
  }
}
</style>